<template>
  <view class="page-container">
    <!-- 页面头部 -->
    <PageHeader title="区域选择器示例" :showBack="true" />
    
    <!-- 基本用法示例 -->
    <view class="example-section">
      <text class="section-title">基本用法</text>
      <RegionSelector 
        v-model="basicRegion"
        @change="handleBasicChange"
      />
    </view>
    
    <!-- 数据回显示例 -->
    <view class="example-section">
      <text class="section-title">数据回显</text>
      <RegionSelector 
        v-model="savedRegion"
        :default-range="savedRange"
        @change="handleSavedChange"
      />
      <view class="mt-[20rpx] text-[24rpx] text-gray-500">
        模拟从后端获取的数据：范围类型 {{ savedRange }}
      </view>
    </view>
    
    <!-- 禁用状态示例 -->
    <view class="example-section">
      <text class="section-title">禁用状态</text>
      <RegionSelector 
        v-model="disabledRegion"
        :disabled="true"
      />
    </view>
    
    <!-- 自定义标题示例 -->
    <view class="example-section">
      <text class="section-title">自定义标题</text>
      <RegionSelector 
        v-model="customRegion"
        title="请选择任务发布区域"
        @change="handleCustomChange"
      />
    </view>
    
    <!-- 表单集成示例 -->
    <view class="example-section">
      <text class="section-title">表单集成</text>
      <view class="form-container">
        <view class="form-item">
          <text class="label">任务标题</text>
          <input 
            v-model="formData.title"
            class="input"
            placeholder="请输入任务标题"
          />
        </view>
        
        <RegionSelector 
          v-model="formData.region"
          @change="handleFormRegionChange"
        />
        
        <view class="form-summary">
          <text class="summary-title">表单数据预览：</text>
          <text class="summary-item">标题：{{ formData.title || '未填写' }}</text>
          <text class="summary-item">区域：{{ getRegionText(formData.region) }}</text>
          <text class="summary-item">信息费：¥{{ formData.regionFee }}</text>
          <text class="summary-item">范围类型：{{ formData.rangeType }}</text>
        </view>
        
        <nut-button 
          type="primary" 
          class="submit-btn"
          @click="submitForm"
        >
          提交表单
        </nut-button>
      </view>
    </view>
    
    <!-- 方法调用示例 -->
    <view class="example-section">
      <text class="section-title">方法调用</text>
      <RegionSelector ref="methodRegionSelector" />
      <view class="method-buttons">
        <nut-button 
          size="small"
          @click="getCurrentSelection"
        >
          获取当前选择
        </nut-button>
        <nut-button 
          size="small"
          @click="setToProvince"
        >
          设置为省级
        </nut-button>
        <nut-button 
          size="small"
          @click="resetSelection"
        >
          重置选择
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Taro from '@tarojs/taro'
import PageHeader from '@/components/PageHeader.vue'
import RegionSelector from '@/components/RegionSelector.vue'

// 基本用法
const basicRegion = ref('city')
const handleBasicChange = (data: { value: string; fee: number; range: string }) => {
  console.log('基本用法变化:', data)
}

// 数据回显
const savedRange = ref('2') // 模拟从后端获取的省级数据
const savedRegion = ref('province')
const handleSavedChange = (data: { value: string; fee: number; range: string }) => {
  console.log('数据回显变化:', data)
}

// 禁用状态
const disabledRegion = ref('nation')

// 自定义标题
const customRegion = ref('city')
const handleCustomChange = (data: { value: string; fee: number; range: string }) => {
  console.log('自定义标题变化:', data)
}

// 表单集成
const formData = reactive({
  title: '',
  region: 'city',
  regionFee: 1,
  rangeType: '1'
})

const handleFormRegionChange = (data: { value: string; fee: number; range: string }) => {
  formData.region = data.value
  formData.regionFee = data.fee
  formData.rangeType = data.range
}

const submitForm = () => {
  if (!formData.title) {
    Taro.showToast({
      title: '请填写任务标题',
      icon: 'none'
    })
    return
  }
  
  Taro.showModal({
    title: '提交成功',
    content: `任务标题：${formData.title}\n发布区域：${getRegionText(formData.region)}\n信息费：¥${formData.regionFee}`,
    showCancel: false
  })
}

// 方法调用
const methodRegionSelector = ref()

const getCurrentSelection = () => {
  const selection = methodRegionSelector.value.getCurrentSelection()
  Taro.showModal({
    title: '当前选择',
    content: `区域：${selection?.label}\n信息费：¥${selection?.fee}\n范围类型：${selection?.range}`,
    showCancel: false
  })
}

const setToProvince = () => {
  methodRegionSelector.value.setValueByRange('2')
  Taro.showToast({
    title: '已设置为省级',
    icon: 'success'
  })
}

const resetSelection = () => {
  methodRegionSelector.value.reset()
  Taro.showToast({
    title: '已重置选择',
    icon: 'success'
  })
}

// 工具函数
const getRegionText = (val: string): string => {
  if (val === "city") return "市级"
  if (val === "province") return "省级"
  if (val === "nation") return "全国"
  return ""
}
</script>

<style scoped>
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.example-section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 30rpx 20rpx;
  padding-left: 20rpx;
  border-left: 8rpx solid #165DFF;
}

.form-container {
  background-color: white;
  margin: 30rpx;
  padding: 40rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-summary {
  background-color: #f8f9fa;
  padding: 30rpx;
  border-radius: 12rpx;
  margin: 30rpx 0;
}

.summary-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.summary-item {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.submit-btn {
  width: 100%;
  margin-top: 30rpx;
}

.method-buttons {
  display: flex;
  gap: 20rpx;
  margin: 30rpx;
  flex-wrap: wrap;
}
</style>
